<!DOCTYPE html>
<html>
<head>
    <title>CSS Transforms Test: transform property with translate function</title>
    <link rel="author" title="zhenyu_w3c" href="mailto:77765477@163.com">
    <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
    <link rel="match" href="reference/ttwf-reftest-background-repeat-x-ref.html">
    <meta name="assert" content="You should only see the img with two color render on the X directions.">
    <style type="text/css">
        table{
			font-size:12px;
		}
		th{ 
			height:160px;
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='support/table-head.jpg',sizingMethod='scale'); background-repeat: repeat-x;
			/*background:url(support/table-head.jpg) repeat-x;*/
			border-width:0px;
		}
		
    </style>
</head>
<script>
 var filter=true;
 var obj_array=document.getElementsByTagName("th");

 
 function switch_filter(){
	if(filter){
		for(i=0;i<obj_array.length;i++){
			obj_array[i].style.filter="";
			obj_array[i].style.background="url(support/table-head.jpg) repeat-x";
		} 
		var button=document.getElementById("switch-button");
		button.value="has use the pure repeat-x.click here to cancel repeat-x,to use filter!!!";
		filter=false;
	}
	else{
		for(i=0;i<obj_array.length;i++){
			obj_array[i].style.background="";
			obj_array[i].style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='support/table-head.jpg',sizingMethod='scale'); background-repeat: repeat-x";
		} 
		var button=document.getElementById("switch-button");
		button.value="has used the filter.click here to cancel filter,to use pure repeat-x!!!";
		filter=true;
	}
 }
</script>
<body>
    <p>The test passes if you see the img repeat on the X direction (not repeat on the Y direction) </p>
	<div><input id="switch-button" onclick="switch_filter()" type="button" value="has used the filter.click here to cancel filter,to use pure repeat-x!!!"></div>
    <table>
	  <tr>
	  <th>
	   first
	  </th>
	  <th>
	   second
	  </th>
	  <th>
	   third
	  </th>
	  </tr>
	  <tr>
	   <td>
	   1
	   </td>
	   <td>
	   2
	   </td>
	   <td>
	   3
	   </td>
	  </tr>
	</table>
</body>
</html>
